<template>
   <div class="zong">
    <!-- 上边两个图表 -->
    <div class="top">
      <div class="lefttop">
          <div class="title">工单数量</div>
          <!-- 选择框，输入框 -->
          <div class="block">
            <el-select v-model="work" class="xz" placeholder="请选择"  size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-model="worktime"
              type="daterange"
              style="width:250px; height:23px;margin-left:10px;"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>
          <!-- 左侧文字 -->
          <div class="left">
            <p>今年 <span style="font-size:20px; color:#277bcb;">128</span> 次</p>
            <p>本月 <span style="font-size:20px; color:#277bcb;">15</span>次</p>
            <p>昨日 <span style="font-size:20px; color:#277bcb;">8</span>次</p>
          </div>
          <!-- 绘制图表 -->
          <div id="a" style="height: 250px; width: 600px;margin-left:120px; margin-top:-170px;" ></div>
      </div>
      <div class="lefttop" style="margin-left:20px;">
        <div class="title">故障数量分布</div>
        <!-- 绘制图表 -->
          <div id="b" style="height: 300px; width: 700px " ></div>
      </div>
    </div>
    <!-- 下边两个图表 -->
    <div class="top" style="margin-top:20px;">
      <div class="lefttop">
        <div class="title">风险严重程度统计</div>
        <div style="display:flex;">
          <div>
              <!-- 绘制图表饼形图 -->
                <div id="c" style="height: 230px; width: 300px; " ></div>
          </div>
          <div>
            <div class="risk">
                <!-- 绘制图表折线图 -->
                <el-date-picker
                v-model="risk"
                type="daterange"
                style="width:250px; height:23px;"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </div>
                <div id="c1" style="height: 250px; width: 450px;margin-top:20px; " ></div>
          </div>
        </div>
      </div>
      <div class="lefttop" style="margin-left:20px;" >
        <div class="title">故障率趋势</div>
        <div class="trend">
            <el-date-picker
              v-model="trend"
              type="daterange"
              style="width:250px; height:23px;margin-left:10px;"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
        </div>
        <!-- 绘制图表 -->
        <div id="d" style="height: 230px; width: 600px;margin-left:20px; " ></div>
      </div>
    </div>
    <!-- 最下边一个图表 -->
    <div class="lefttop" style="margin-top:20px; height:320px;">
        <div class="title">预防性维护占比</div>
        <div class="trend">
             <el-date-picker
                v-model="maintain"
                type="monthrange"
                align="right"
                style="width:250px; height:23px;margin-left:10px;"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
        </div>
        <!-- 绘制图表 -->
        <div id="e" style="height: 270px; width: 600px;margin-left:20px; margin-top:20px;" ></div>
    </div>
    <button @click="reactYear">111</button>
  </div>
</template>
<script >
import {ref,reactive, onMounted,onBeforeUpdate} from 'vue'
import * as echarts from "echarts";
export default {
    setup(){
          const work = ref('')
          const trend = ref('')
          const maintain = ref('')
          const risk = ref('')
          const worktime = ref('请选择')

          const options = reactive([
            {
              value: '所有',
              label: '所有',
            },
            {
              value: '冷冻机',
              label: '冷冻机',
            },
            {
              value: '冷冻泵',
              label: '冷冻泵',
            },
            {
              value: '冷却泵',
              label: '冷却泵',
            },
            {
              value: '冷却塔',
              label: '冷却塔',
            },
            {
              value: 'BA',
              label: 'BA',
            },
          ])
          function a() {
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById("a"));
              myChart.setOption({
                legend: {
                  left: 20,
                  orient: "horizontal",
                  data: ["工单", "数量"],
                },
                xAxis: {
                  type: "category",
                  data: ["4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","4/31",],
                },
                yAxis: {
                  type: "value",
                },
                series: [
                  {
                    name: "工单",
                    type: "line",
                    data: ["12","14","10","14","10","12","13","8","11","10","11","13",],
                    // 线条覆盖颜色
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient( 0, 0, 0,1,
                          [
                            {
                              offset: 0,
                              color: "#fdf1ce",
                            },
                            {
                              offset: 1,
                              color: "#dae3d3",
                            },
                          ],
                          false
                        ),
                      },
                    },
                    // 线条颜色
                    itemStyle: {
                      normal: {
                        color: "#f7b851",
                      },
                    },
                    // 线条宽度
                    lineStyle: {
                      normal: {
                        width: 3,
                      },
                    },
                  },
                  {
                    name: "数量",
                    type: "line",
                    data: ["12","14","8","8","6","4","15","11","5","3","7","8",],
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0,0,0,1,
                          [
                            {
                              offset: 0,
                              color: "#d8e9f5",
                            },
                            {
                              offset: 1,
                              color: "#d8e9f5",
                            },
                          ],
                          false
                        ),
                      },
                    },
                    itemStyle: {
                      normal: {
                        color: "#479bd0",
                      },
                    },
                    lineStyle: {
                      normal: {
                        width: 3,
                      },
                    },
                  },
                ],
              });
            }
          function b(){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById("b"));
              myChart.setOption({
                    legend: {
                    },
                    tooltip: {},
                    dataset: {
                      source: [
                        ['product', '2019', '2020', '2021','2022'],
                        ['制冷机', 43.3, 85.8, 93.7,85.8],
                        ['冷却泵', 83.1, 73.4, 55.1,85.8],
                        ['冷冻泵', 86.4, 65.2, 82.5,85.8],
                        ['冷却塔', 72.4, 53.9, 39.1,85.8]
                      ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    series: [{ type: 'bar',color:'#90cd50' }, { type: 'bar',color:'#ffc000' }, { type: 'bar',color:'#d6ebfa' }, { type: 'bar',color:'#0070c0' }]
                    });
            }
          function c(){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById("c"));
              myChart.setOption({
                tooltip: {
                  trigger: 'item'
                },
                legend: {
                  data:['高','中','低'],
                  left: 'center',
                  top:'bottom'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                      { value: 1048, name: '高' },
                      { value: 735, name: '中' },
                      { value: 300, name: '低' }
                    ],
                    emphasis: {
                      itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                  }
                ]
              })

              // 基于准备好的dom，初始化echarts实例
              let myChart1 = echarts.init(document.getElementById("c1"));
              myChart1.setOption({
                legend: {
                  left: 20,
                  orient: "horizontal",
                  data: ["高", "中","低"],
                },
                xAxis: {
                    type: 'category',
                    data: ["4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","4/31"],
                    axisLabel: {
                        rotate: 45,
                      },
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      name:'高',
                      data: [0, 3, 2,6,8,4,6,3, 5, 3, 2, 1],
                      type: 'line'
                    },
                    {
                      name:'中',
                      data: [4,4,4,4,4,4,4,4,4,4,4,4,4],
                      type: 'line'
                    },
                    {
                      name:'低',
                      data: [1, 2,3,3,2,3,1,2, 4, 3, 6, 5],
                      type: 'line'
                    }
                  ]
              })
            }
          function d(){
              // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById("d"));
              myChart.setOption({
                legend: {
                  left:50,
                  data: ['所有', '冷冻机', '冷冻泵', '冷却泵', '冷却塔']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ["4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","4/31"]
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '所有',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210,123,232,123,222,111]
                  },
                  {
                    name: '冷冻机',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310,123,233,123,443,122]
                  },
                  {
                    name: '冷冻泵',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410,232,123,322,123,233]
                  },
                  {
                    name: '冷却泵',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320,123,233,123,443,232]
                  },
                  {
                    name: '冷却塔',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320,122,322,1231,213,231]
                  }
                ]
              });
            }
          function e(){
                // 基于准备好的dom，初始化echarts实例
              let myChart = echarts.init(document.getElementById("e"));
              myChart.setOption({
                xAxis: {
                    type: 'category',
                    // data: ["4/20","4/21","4/22","4/23","4/24","4/25","4/26","4/27","4/28","4/29","4/30","4/31"]
                    data:reactYear(),
                    axisLabel: {
                        rotate: 45,
                      },
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [
                    {
                      data: [150, 230, 224, 218, 135, 147, 260,232,123,223,132,122],
                      type: 'line',
                    }
                  ]
              })
            }
          // 获取前12月月份函数
          function reactYear(){
            var d = new Date();
            var result = [];
            for(var i = 0; i < 12; i++) {
              d.setMonth(d.getMonth() - 1);
              var m = d.getMonth() ;
              m = m < 10 ? "0" + m : m;
              //在这里可以自定义输出的日期格式
    //					result.push(d.getFullYear() + "-" + m);
              result.push(d.getFullYear() + "." + m );
            }
            console.log(result,2222222222);
            return result;
          }
          onMounted(()=>{
            a(),b(),c(),d(),e()
          })
          onBeforeUpdate(()=>{
          })
          return{
            work,trend,maintain,risk,worktime,options,a,b,c,d,e,reactYear
          }
         },
}
</script>

<style scoped>
.block{
  margin-left: 400px;
  display: flex;
  margin-left:240px;
  margin-top:15px;
}
.top{
  display: flex;
}
.risk{
  position: relative;
  top: 20px;
  left: 150px;
}
.zong{
  /* background-color: #e5edf7; */
  height: 1000px;
  width: 100%;
}
.trend{
  position: relative;
  left: 450px;
  top: 25px;
}
.left p{
  font-size: 12px;
  margin-top: 30px;
}
.lefttop{
  width: 49%;
  /* width: 750px; */
  height: 300px;
  background-color: white;
  border-radius: 20px;
}
.left{
  position: relative;
  left: 30px;
  top: 10px;
}
.title{
  font-size: 18px;
  font-weight: 550;
  color: #4d62a5;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f2f3f8;
}
.xz{
  width: 100px;
  background: #c0cfe3;
  margin-left: 90px;
  border-radius: 10px;
  color: #c0cfe3;
}
</style>
